Pseudo-elements like ::before and ::after can be styled extensively using CSS. They can be positioned, given backgrounds, and even used to create shapes or icons without adding extra HTML elements.

Key Capabilities

1
Pseudo-elements can use position properties (relative, absolute, fixed) for precise placement.
2
You can assign background-color, background-image, gradients, or other visual styles to pseudo-elements.
3
Shapes like circles, squares, triangles, and icons can be created using width, height, border, border-radius, and transform properties.
4
Pseudo-elements are ideal for decorative purposes, visual indicators, or small UI enhancements without cluttering the HTML.

Example: Creating a Decorative Circle Before Text

In this example, ::before creates a small blue circle before the paragraph text. By adjusting size, color, and position, pseudo-elements can serve as icons, markers, or decorative shapes.

Best Practices

1
Use pseudo-elements for non-essential decorative or functional visuals.
2
Combine with transitions or animations for dynamic effects.
3
Always define content, otherwise the pseudo-element will not render.
4
Test on multiple browsers to ensure shapes and positioning render consistently.

Difficulty: 6/10

Topics: pseudo-element positioning, background styling with pseudo-elements, shape/icon creation with CSS

Scenario Questions

0-2 years experience

1
How would you use ::before to create a small red circle next to a heading, and what CSS properties would you need to make sure it shows up correctly?
2
What happens if you try to set a background-image on ::after without setting display: block or inline-block?
3
If you position a ::before element absolutely but it doesn’t move from its original spot, what’s the most likely reason?

2-5 years experience

1
A designer wants a tooltip arrow using ::after, but it’s misaligned when the parent container is resized—how would you debug and fix this?
2
You’re building a badge component with a pseudo-element icon, but screen readers are reading the content attribute—how do you make it accessible without breaking the design?
3
Why might using pseudo-elements for icons cause issues in a dynamic React app where content is rendered server-side?

5-8 years experience

1
You’re designing a scalable icon system using pseudo-elements for SVG-like shapes—what are the performance and maintainability tradeoffs compared to using inline SVG or icon fonts?
2
How would you handle pseudo-element styling in a themable component library where background colors and shapes need to adapt to dark/light modes without duplicating CSS rules?
3
A team is using pseudo-elements to create complex UI shapes across hundreds of components—what edge cases might cause layout shifts or repaints on low-end devices?

8+ years experience

1
You’re migrating a legacy UI that uses pseudo-elements for icons to a new design system—how do you assess technical debt, plan the transition, and communicate risks to product teams?
2
How would you architect a CSS-in-JS solution that allows pseudo-element-based shapes to be dynamically themed across micro-frontends without causing style collisions or bloated CSS bundles?
3
A company-wide design system relies heavily on pseudo-elements for decorative elements, but accessibility audits show inconsistent screen reader behavior—what systemic changes would you propose to align with WCAG without sacrificing design flexibility?

Follow-up Questions

❓What happens if you forget to set content on a pseudo-element?
❓How would you debug a pseudo-element that’s not rendering at all?
❓When would you avoid using pseudo-elements for icons?